<template>
  <section class="ai-section">
    <div class="ai-container">
      <h2 class="section-title">芝麻AI</h2>
      <p class="section-subtitle">智能版权顾问，为您解答各类版权疑难问题</p>
      
      <div class="ai-content">
        <div class="ai-info">
          <p class="ai-desc">
            芝麻AI是基于先进自然语言处理技术打造的专业版权智能顾问，能够为您提供全方位的版权咨询服务。无论是版权维权、登记、质押、评估还是授权交易等专业问题，芝麻AI都能给予专业、准确的解答和建议，让版权保护变得更加简单高效。
          </p>
          
          <div class="service-list">
            <div class="service-item" v-for="(service, index) in services" :key="index">
              <div class="service-icon">
                <i :class="service.icon"></i>
              </div>
              <div class="service-info">
                <h3>{{ service.title }}</h3>
                <p>{{ service.desc }}</p>
              </div>
            </div>
          </div>
          
          <el-button 
            type="primary" 
            class="ai-btn" 
            @click="startConsultation"
          >
            开始咨询
          </el-button>
        </div>
        
        <div class="contact-form">
          <h3 class="form-title">留下您的信息，获取专业解答</h3>
          <el-form :model="contactForm" :rules="rules" ref="contactFormRef" label-position="top">
            <el-form-item label="您的姓名" prop="name">
              <el-input v-model="contactForm.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="contactForm.phone" placeholder="请输入您的联系电话"></el-input>
            </el-form-item>
            <el-form-item label="咨询类型" prop="type">
              <el-select v-model="contactForm.type" placeholder="请选择咨询类型" style="width: 100%">
                <el-option v-for="item in consultationTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="咨询问题" prop="message">
              <el-input type="textarea" v-model="contactForm.message" placeholder="请简要描述您的问题" :rows="4"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button 
                type="primary" 
                class="submit-btn" 
                @click="submitForm"
                :loading="submitting"
              >
                提交咨询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'CopyrightMonitoring',

  setup() {
    const router = useRouter()
    const contactFormRef = ref(null)
    const submitting = ref(false)
    
    const services = [
      {
        icon: 'el-icon-warning-outline',
        title: '版权维权',
        desc: '解答侵权判定、维权流程、证据收集等问题，提供维权策略建议'
      },
      {
        icon: 'el-icon-document-checked',
        title: '版权登记',
        desc: '提供作品登记条件、流程、所需材料等专业咨询服务'
      },
      {
        icon: 'el-icon-money',
        title: '版权质押与评估',
        desc: '解析版权资产价值评估方法、质押融资流程等问题'
      },
      {
        icon: 'el-icon-share',
        title: '版权授权交易',
        desc: '提供授权模式选择、价格定位、合同条款等交易指导'
      }
    ]
    
    const consultationTypes = [
      { label: '版权维权', value: 'rights_protection' },
      { label: '版权登记', value: 'copyright_registration' },
      { label: '版权质押', value: 'copyright_pledge' },
      { label: '版权评估', value: 'copyright_evaluation' },
      { label: '授权交易', value: 'licensing' },
      { label: '其他问题', value: 'others' }
    ]
    
    const contactForm = reactive({
      name: '',
      phone: '',
      type: '',
      message: ''
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入您的姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在2到20个字符之间', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择咨询类型', trigger: 'change' }
      ],
      message: [
        { required: true, message: '请输入咨询内容', trigger: 'blur' },
        { min: 5, max: 500, message: '长度在5到500个字符之间', trigger: 'blur' }
      ]
    }
    
    const startConsultation = () => {
      // 滚动到表单位置
      const formElement = document.querySelector('.contact-form')
      if (formElement) {
        formElement.scrollIntoView({ behavior: 'smooth' })
      }
    }
    
    const submitForm = () => {
      if (!contactFormRef.value) return
      
      contactFormRef.value.validate((valid) => {
        if (valid) {
          submitting.value = true
          
          // 模拟API提交
          setTimeout(() => {
            submitting.value = false
            ElMessage({
              type: 'success',
              message: '咨询信息提交成功，我们的顾问将尽快与您联系!'
            })
            
            // 清空表单
            contactFormRef.value.resetFields()
          }, 1500)
        }
      })
    }

    return {
      services,
      consultationTypes,
      contactForm,
      contactFormRef,
      rules,
      submitting,
      startConsultation,
      submitForm
    }
  }
})
</script>

<style lang="scss" scoped>
.ai-section {
  width: 100%;
  padding: 80px 0;
  background-color: #f9fafc;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(83, 183, 215, 0.1) 0%, rgba(83, 183, 215, 0) 70%);
    z-index: 0;
  }
  
  .ai-container {
    width: $container-width;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .section-title {
    font-size: 36px;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, $primary-color, lighten($primary-color, 15%));
    }
  }
  
  .section-subtitle {
    text-align: center;
    font-size: 18px;
    color: #666;
    margin: 30px auto;
    max-width: 600px;
  }
  
  .ai-content {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    
    @media screen and (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .ai-info {
    width: 48%;
    
    @media screen and (max-width: 768px) {
      width: 100%;
    }
  }
  
  .ai-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
  }
  
  .service-list {
    margin: 30px 0;
  }
  
  .service-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      
      .service-icon {
        background: linear-gradient(135deg, #1890ff, #53b7d7);
        color: white;
      }
      
      h3 {
        color: $primary-color;
      }
    }
  }
  
  .service-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(83, 183, 215, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: $primary-color;
    transition: all 0.3s ease;
    
    i {
      font-size: 24px;
    }
  }
  
  .service-info {
    flex: 1;
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }
    
    p {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .ai-btn {
    padding: 14px 48px;
    background: $primary-color;
    border-color: $primary-color;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 8px;
    letter-spacing: 1px;
    margin-top: 20px;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.7s ease;
      z-index: -1;
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 15px rgba(83, 183, 215, 0.3);
      background: darken($primary-color, 5%);
      border-color: darken($primary-color, 5%);
      
      &::before {
        left: 100%;
      }
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 3px 8px rgba(83, 183, 215, 0.3);
    }
  }
  
  .contact-form {
    width: 45%;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }
    
    @media screen and (max-width: 768px) {
      width: 100%;
      margin-top: 40px;
    }
    
    .form-title {
      font-size: 22px;
      color: #333;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
    }
  }
  
  :deep(.el-form-item__label) {
    color: #333;
    font-weight: 500;
  }
  
  :deep(.el-input__inner) {
    border-radius: 8px;
    border-color: #dcdfe6;
    
    &:focus {
      border-color: $primary-color;
    }
  }
  
  :deep(.el-textarea__inner) {
    border-radius: 8px;
    border-color: #dcdfe6;
    
    &:focus {
      border-color: $primary-color;
    }
  }
  
  .submit-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    background: $primary-color;
    border-color: $primary-color;
    transition: all 0.3s ease;
    
    &:hover {
      background: darken($primary-color, 5%);
      border-color: darken($primary-color, 5%);
      box-shadow: 0 5px 15px rgba(83, 183, 215, 0.3);
    }
  }
  
  @media screen and (max-width: 1200px) {
    .ai-container {
      width: 90%;
    }
  }
  
  @media screen and (max-width: 768px) {
    padding: 60px 0;
    
    .section-title {
      font-size: 28px;
    }
    
    .section-subtitle {
      font-size: 16px;
    }
    
    .ai-btn {
      width: 100%;
      padding: 12px;
      font-size: 15px;
    }
  }
}
</style> 